
<template>
    <div>
        <image ref="imgbg" style="width:750px; height: 1333px;" src="http://ok7s5wpmw.bkt.clouddn.com/default.jpg"></image>
        <!-- <image  style="width:100; height:100; left:120;" src="http://ok7s5wpmw.bkt.clouddn.com/wx_logo.png"></image>
        <text class="logintxt" style="left:120; color:#228B22;" >微信</text> -->
        <!--<div id="divwx" class="loginicon" style="opacity:0.1">-->
        <image class="loginicon" ref="divwx" style="width:100px; height:100px; left:120px;opacity:1;" @click="onClick(cwx)" src="http://ok7s5wpmw.bkt.clouddn.com/wx_logo.png"></image>
        <!-- <text class="logintxt" style="left:120; color:#228B22;" >微信</text> -->
        <!--</div>-->
        <!--<div id="divqq" class="loginicon" style="opacity:0.1">-->
        <image class="loginicon" ref="divqq" style="width:100px; height:100px; left:315px;opacity:1" @click="onClick(cqq)" src="http://ok7s5wpmw.bkt.clouddn.com/qq_logo.png"></image>
        <!-- <text class="logintxt" style="left:315; color:#4682B4;" >QQ</text> -->
        <!--</div>-->
        <!--<div id="divsina" class="loginicon" style="opacity:0.1">-->
        <image class="loginicon" ref="divsina" style="width:100px; height:100px; left:510px;opacity:1" @click="onClick(csina)" src="http://ok7s5wpmw.bkt.clouddn.com/sina_logo.png"></image>
        <!-- <text class="logintxt" style="left:510; color:#DC143C;" >微博</text> -->
        <!--</div>-->
        <div class="timer" @click="jump">
            <text  >跳过 {{sec}}</text>
        </div>


    </div>
</template>

<script>
    var eventModule = weex.requireModule('event');  // 自定义模块
    module.exports = {
        data() {
            return {
                csina: 'sina',
                cqq: 'qq',
                cwx: 'wx',
                sec: 3,
                platform: 'iOS'
            }
        },
        ready: function (e) {
            var vm = this;
            // vm.$on('tabBar.onClick',function(e){
            //   var detail= e.detail;
            //   nativeLog('tabBar.onClick ' + detail.index);
            // });
        },
        created: function() {

            this.$getConfig(function (config) {
                var env = config.env;
                this.platform = env.platform
            }.bind(this));

            var vm = this;
            var refreshIntervalId = setInterval(function(){
                vm.sec = vm.sec - 1;
                if (vm.sec == 0) {
                    // 清空定时器
                    clearInterval(refreshIntervalId);
                    // 跳转主页面
                    vm.jump();
                }
            }, 1000);


            // var self = this;

            // var $countdown = this.$vm(id);
            // $countdown.$on('tick', function(e) {
            //   Object.assign(self[id].time, e.detail);
            // });

        },
        mounted() {
            var vm = this;

            setTimeout(function(){
//                vm.composite(vm.$refs.divwx)
            }, 300);

            setTimeout(function(){
//                vm.composite(vm.$refs.divqq)
            }, 400);

            setTimeout(function(){
//                vm.composite(vm.$refs.divsina)
            }, 500);
        },
        methods: {

            onClick: function(item) {

            },
            jump: function () {
                // 跳转主页面
                eventModule.openMainVC({
                    msg: 'openMainVC'
                }, function (e) {
                    console.log(e)
                })
            },
            anim: function(styles, timingFunction, duration, id, callback) {
                this.$call('animation', 'transition', id, {
                    styles: styles,
                    timingFunction: timingFunction,
                    duration: duration
                }, callback);
            },
            composite: function(id) {
                this.anim({
                    transform: 'translate(0%, -50%)',
                    transformOrigin: 'center center',
                    opacity: 1
                }, 'ease-out', 400, id, function() {
                });
            },
        }
    }
</script>

<style>
    .logintxt {
        font-size: 36px;
    }
    .loginicon {
        position: absolute;
        top: 720px;
    }

    .timer {
        position: absolute;
        top: 60px;
        left: 600px;
        height:60px;
        width: 120px;
        border-radius:30px;
        background-color:#eee;
        opacity:0.7;
        align-items: center;
        justify-content: center;
    }

</style>
